<template>
	<div class="photoinfo-content">
		<h3>{{photoInfo.title}}</h3>
		<p class="subtitle">
			<span>发表时间: {{photoInfo.add_time | dataFormat}}</span>
			<span>点击：{{photoInfo.click}}次</span>
		</p>
		<hr>

		<!--缩略图区域-->
		<!--<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">-->
		<div class="thumbs">
			<vue-preview :slides="setPreview" @close="handleClose"/>
		</div>

		<!--图片内容区域-->
		<div class="content" v-html="photoInfo.content"></div>

		<!--放入评论子组件-->
		<cmt-box :id="id"></cmt-box>

	</div>
</template>

<script>

    // 导入评论子组件
    import comment from "../subcomponents/comment";

    export default {
        name: "PhotoInfo",
        data() {
            return {
                id: this.$route.params.id, // 从路由中获取到的图片ID
                photoInfo: {}, // 图片详情
                list: [], // 缩略图的数组
                setPreview: []
            }
        },
        created() {
            this.getPhotoInfo();
            this.getThumbs();
        },
        methods: {
            getPhotoInfo() {
                // 获取图片的详情
                this.$http.get('api/getimageInfo/' + this.id).then(result => {
                    if (result.body.status === 0) {
                        this.photoInfo = result.body.message[0];
                    }
                })
            },
            getThumbs() {
                this.$http.get('api/getthumimages/' + this.id).then(result => {
                    if (result.body.status === 0) {
                        // 循环每个图片数据，不全图片的宽和高
                        result.body.message.forEach(item => {
                            item.w = 600;
                            item.h = 400;
                            item.msrc = item.src;
                        })
                        // 把完整的图片保存到slide1中
                        this.setPreview = result.body.message;
                    }
                })
            },
            handleClose() {
                console.log('close event')
            }
        },
        components: {// 注册评论子组件
            'cmt-box': comment,
        }

    }
</script>

<style lang="less">
	.photoinfo-content {
		padding: 3px;

		h3 {
			color: #26a2ff;
			font-size: 15px;
			text-align: center;
			margin: 15px 0;
		}

		.subtitle {
			display: flex;
			justify-content: space-between;
			font-size: 13px;
		}

		.content {
			font-size: 13px;
			line-height: 30px;
		}

		.thumbs {
			.my-gallery{
				display: flex;
				flex-wrap: wrap;
				figure{
					width: 30%;
					margin: 5px;
					img {
						width: 100%;
						box-shadow: 0 0 5px #cccccc;
					}
				}
			}
		}
	}

</style>